<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/stores/data' 
const store = useStore();

const router = useRouter()
const mobile = ref('')
const password = ref('')
const isView = ref(false)
const isRadio = ref(false)
const showClearIcon = ref(false)
const isLoading = ref(false)
const errorMessage = ref('')

const view = () => {
  isView.value = !isView.value
}

const radioTap = () => {
  isRadio.value = !isRadio.value
}

const toForget = () => {
  router.push('/forget')
}

const clearInput = () => {
  showClearIcon.value = mobile.value.length > 0
}

const clearIcon = () => {
  mobile.value = ''
  showClearIcon.value = false
}

const login = async () => {
  if (!isRadio.value) {
    errorMessage.value = '请先同意用户协议和隐私政策'
    return
  }
  if (!store.login.username || !store.login.password) {
    errorMessage.value = '请输入账号和密码'
    return
  }
  try {
    errorMessage.value = ''
    store.login.username = store.login.username.toString()
    await store.loginAct()
  } catch (e) {
    console.log(e);
  }
  
}
</script>

<template>
  <!-- 登录 -->
  <div class="content-item">
    <div class="login-form">
      <div class="form-content">
        <div class="item">
          <div class="item-title">账号</div>
          <div class="input-block">
            <input
              class="item-input"
              type="number"
              v-model="store.login.username"
              placeholder="账号为初始注册的手机号码"
              @input="clearInput"
            />
            <span v-if="showClearIcon" class="clear-icon" @click="clearIcon">×</span>
          </div>
        </div>

        <div class="item">
          <div class="item-title">密码</div>
          <div class="input-block">
            <input
              v-show="!isView"
              class="item-input"
              type="password"
              v-model="store.login.password"
              placeholder="请输入密码"
            />
            <input
              v-show="isView"
              class="item-input"
              type="text"
              v-model="store.login.password"
              placeholder="请输入密码"
            />
            <div class="icon" :class="{ active: isView }" @click="view"></div>
          </div>
        </div>

        <div class="change-password" @click="toForget">忘记密码</div>
        <div style="height: 30px;"></div>
        <div class="button-block">
          <button class="button" @click="login" :disabled="isLoading">
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
        </div>
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </div>

      <div class="protocol">
        <div class="protocol-radio" :class="{ active: isRadio }" @click="radioTap"></div>
        <div class="protocol-text">
          已同意并阅读 <span>用户协议</span>与 <span>隐私政策</span>，未注册账号请先注册再登录。
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>
